import "./App.css";
import { Route, Routes, NavLink, useNavigate } from "react-router-dom";
import Home from "./pages/Home/Home";
import About from "./pages/About/About";
import Redux from "./pages/Redux/Redux";
import { useState } from "react";
function App() {
  const [id, setId] = useState(1);
  const [title, setTitle] = useState("张三");
  const navigate = useNavigate();
  const toHome = () => {
    navigate("/home", {
      state: {
        id,
        title,
      },
    });
  };
  return (
    <div className="App">
      <ul>
        <li>
          {/* <NavLink to={`/home/${id}/${title}`}>首页</NavLink>  /// params携带参数跳转 */}
          {/* <NavLink to={`/home?id=${id}&title=${title}`}>首页</NavLink>  query 参数携带跳转 */}
          <button onClick={toHome}>去首页</button>
        </li>
        <li>
          <NavLink to="/About">关于</NavLink>
        </li>
        <li>
          <NavLink to="/Redux">Redux</NavLink>
        </li>
      </ul>
      <Routes>
        <Route path="/" element={<Home></Home>}></Route>
        {/* <Route path="/home/:id/:title" element={<Home></Home>}></Route>   // params传参 */}
        <Route path="/home" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
        <Route path="/redux" element={<Redux />}></Route>
        <Route path="*" element={<div>我是404， 我走丢了</div>}></Route>
      </Routes>
    </div>
  );
}

export default App;
